<template>
  <section>
    <ul v-if="todos.length">
      <!-- <li v-for="(item, index) in todos" :key="index" v-if="!item.isComplate">{{item.message}}</li> -->
      <li v-for="(item, index) in todos" :key="index">{{item.message}}</li>
    </ul>
  </section>
</template>

<script>
export default {
  name: "Todos",
  data() {
    return {
      todos: [
        { message: "Foo1", isComplate: false },
        { message: "Foo2", isComplate: false },
        { message: "Foo3", isComplate: false },
        { message: "Foo4", isComplate: true },
        { message: "Foo5", isComplate: true }
      ].filter(item => !item.isComplate)
    };
  }
};
</script>